<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 消除原有样式 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 容器居中展示 */
        .container{
            width: 400px;
            margin: 0 auto;
        }
        h1{
            /* 左右居中 */
            text-align: center;
            /* 上下边距20px,左右边距0 */
            padding: 20px 0;
        }
        p{
            color: #666;
            /* 文字居中 */
            text-align: center;
            /* 字体大小 */
            font-size: 14px;
            /* 上下边距10px */
            padding: 10px,0;
        }
        .row{
            /* 高度设置40px */
            height: 40px;
            /* 弹性布局 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span{
            /* 宽 */
            width: 100px;
            line-height: 40px;
        }
        .edit{
            /* 设置输入框的大小 */
            width: 200px;
            height: 30px;
        }
        .submit{
    
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
        
    </style>
</head>
<body>
    <div class = "container">
        <h1>表白墙</h1>
        <p>输入后点击提交,会将信息显示在表格中</p>
        <div class = "row">
            <span>谁:</span>
            <input type="text" class = "edit">
        </div>
        <div class = "row">
            <span>对谁:</span>
            <input type="text" class = "edit">
        </div>
        <div class = "row">
            <span>说什么:</span>
            <input type="text" class = "edit">
        </div>
        <div class = "row">
            <input type="button" value = "提交" class = "submit">
        </div>
    </div>
    
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    let submit = document.querySelector('.submit');
    submit.onclick = function(){
        //获得编辑框的内容
        let edits = document.querySelectorAll('.edit');
        let from = edits[0].value;
        let to = edits[1].value;
        let message = edits[2].value;
        console.log(from + "," + to + "," + message);
        if (from == '' || to == '' || message == '') {
            return;
        }
        //构造HTML元素
        let container = document.querySelector('.container');
        let row = document.createElement('div');
        row.className = 'row';
        row.innerHTML = from + '对' + to + '说: ' + message;
        //把构造好的元素添加进去
        container.appendChild(row);
        for(let i = 0; i < 3; i++){
            //清除消息框内容
            edits[i].value = '';
        }
        //构建HTTP请求
        let body = {
            from: from,
            to: to,
            message: message
        };
        $.ajax({
            type:'post',
            url:'message',
            contentType:'application/json; charset=utf8',
            data: JSON.stringify(body),
            success: function(body){
                console.log(body);
            }
        });
    }
     //加载页面发起get请求给服务器,从服务器拿到提交过的数据
     $.ajax({
            type:'get',
            url:'message',
            success: function(body){
                let container = document.querySelector('.container');
                for(let i = 0; i < body.length; i++){
                    let message = body[i];
                    //构造出html元素
                    let div = document.createElement('div');
                    div.className = 'row';
                    div.innerHTML = message.from + "对" + message.to +"说:" + message.message;
                    container.appendChild(div);
                }
            }
        });
</script>
</html>